<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/js/layui/css/layui.css">
<link rel="stylesheet" href="/js/zTree/css/metroStyle/metroStyle.css">
<style type="text/css">
#ztreeDiv {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, .5);
}

#ztree {
	width: 300px;
	margin: 30px auto;
	font-size: 1.2em;
}
</style>
</head>
<body>
	<div class="layui-col-lg8 layui-col-lg-offset2" style="margin-top: 1%">
		<span style="font-size: 2em; margin: 30px auto; display: block; text-align: center">分配菜单</span>
		<div id="ztreeDiv">
			<ul id="ztree" class="ztree"></ul>
		</div>
		<div class="layui-row" style="text-align: center;">
			<button class="layui-btn" id="submit">确定</button>
		</div>
	</div>

</body>
<script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/js/commentUtils.js"></script>
<script type="text/javascript" src="/js/layui/layui.js"></script>
<script type="text/javascript" src="/js/zTree/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
	layui.use([ 'form' ], function() {
		var form = layui.form;
		initZtree();
		function initZtree() {
			$.get("/sys/permission/ztree", function(res) {
				var ztreeData = res.data;
				zTreeObj = $.fn.zTree.init($("#ztree"), setting, ztreeData);
			}).done(function() {
				$.get("/sys/rolePermission/checked/[[${roleId}]]", function(res) {
					if (res.code == 0) {
						for (var i = 0, l = res.data.length; i < l; i++) {
							console.log(zTreeObj.getNodeByParam("id", res.data[i], null))
							zTreeObj.checkNode(zTreeObj.getNodeByParam("id", res.data[i], null), true, true);
						}
					}
				})
			});
		}
		var ztreeData, zTreeObj, setting = {
			view : {
				selectedMulti : false,
				fontCss : {
					'font-size' : "25px",
					'height' : '25px'
				}
			},
			check : {
				enable : true,
				chkboxType : {
					"Y" : "ps",
					"N" : "ps"
				}
			},
			callback : {
				onClick : zTreeOnClick
			}
		};
		function zTreeOnClick(event, treeId, treeNode) {
			event.preventDefault();//阻止默认事件
			return false;
		}

		$("#submit").on("click", function() {
			var nodes = zTreeObj.getCheckedNodes(true);
			var roleId = '[[${roleId}]]';
			var permissionIds = [];
			for (var i = 0, l = nodes.length; i < l; i++) {
				permissionIds.push(nodes[i].id);
			}
			var postData = {
				roleId : roleId,
				permissionIds : permissionIds
			}
			utils.postUrl('/sys/rolePermission', postData, function(res) {
				if (res.code == 0) {
					parent.layer.msg("角色菜单分配成功!", function() {
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
					});
				} else {
					parent.layer.msg(res.msg);
				}
			});
		});

	});
</script>
</html>